<template>
  <div class="pay">
    <Title></Title>
    <div class="pay_box_wechat">
      <div class="inner_wechat">
        <div class="pay_list_wechat">

          <div>
            <p>
              支付金额：{{pay_data.money}}
            </p>
            <p>
              订单编号：{{pay_data.order_sn}}
            </p>
          </div>
          <br>
          <p style="color: darkred">
            请在支付时填写订单编号
          </p>
          <img id="pay_qrcode" :src="[pay_data.pay_qrcode]" alt="" srcset="">
          <br>
          <div class="pay_item_wechat" @click="payFun">
            已完成支付
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {payorderapi, WechatPayFun} from "../../api/http.js"
import Title from "../../components/title.vue"
export default {
  name: 'pay',
  data() {
    return {
      pay_data: []
    }
  },
  components: {
    Title
  },
  created() {
    this.pay_data =JSON.parse(localStorage.getItem('wechat_pay_data'))
    console.log(this.pay_data.pay_qrcode);
  },
  methods: {
    async payFun() {
      this.$message('等待后台审核')
      this.$router.push({
        path: "/layout/meorder",
      })
    },
  }
}
</script>

<style lang="less">
.pay_box_wechat {
  width: 100%;
  .inner_wechat {
    width: 1300px;
    margin: 0 auto;
    padding: 10px 85px;
    .pay_list_wechat{
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      img{
        width: 320px;
        //height: 30px;
        margin-right: 20px;
      }
      .pay_item_wechat{
        width: 320px;
        //height: 50px;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        align-items: center;
        border-radius: 10px;
        border:1px solid #ccc;
        img{
          width: 320px;
          //height: 30px;
          margin-right: 20px;
        }
      }
    }
  }
}

</style>
